<template>
	<div id="app" class="backf4">  
    <div class="setting_controller">
        <div style="border-bottom: .02rem solid #f4f4f4;">
           <div>绑定手机</div>
           <div class="bind_account" v-text="mobile"></div>
        </div>
        <div style="border-bottom: .02rem solid #f4f4f4;" @click="operaBox(1,'wechat')">
          <div>微信</div>
           <div><span :class="bindObj.weixin==1?'binded':'need_bind'">{{bindObj.weixin==1?'已绑定':'尚未绑定'}}</span><img src="../../../assets/img/arrow_icon.png"></div>
        </div>
        <div @click="operaBox(2,'qq')">
          <div>QQ</div>
           <div><span :class="bindObj.qq==1?'binded':'need_bind'">{{bindObj.qq==1?'已绑定':'尚未绑定'}}</span><img src="../../../assets/img/arrow_icon.png"></div>
        </div>
    </div>
    <!-- <div class="popup z-fixed" v-if="isShow">
        <div class="bg"></div>
        <div class="unbindBox absolute">
            <div class="hilogo">
                 <img src="../../../assets/img/logo.png" alt="logo">
            </div>
            <div class="unbind_controller center">
                <p style="font-size: .26rem;">接触绑定</p>
                <p style="padding-top: .35rem;padding-bottom: .64rem;"></p>
                <div class="flex-between" style="padding: 0 .33rem;">
                    <div class="btn_cancel" @click="operaBox">取消</div>
                    <div class="btn_sure">确定</div>
                </div>
            </div>
        </div>
    </div> -->
    <prompt title="接触绑定" :childTitle="'您将解除绑定你的'+typeVal" v-if="isShow" @cancelBox='closelBox' @sureFun="sureOperaFun"></prompt>
	</div>
</template>
<script>
import './index.css';
import common from 'assets/js/common';
import Prompt from "components/prompt.vue"
export default {
  data() {
    return {
    	isShow:false,
      typeVal:'',
      mobile:'',
      uid:'',
      bindObj:{},
      type:'',
      platform:''
    }
  },
  components: { Prompt }, 
  //已成功挂载，相当ready()
  mounted(){
      this.platform = common.platform;
      this.getUserInfo();
      //解除绑定
      window["unbindAccountFun"] = ()=>{
        if(this.platform == 'ios'){
            unbindThirdAccount(this.uid,this.type);
        }else{
            window.user.unbindThirdAccount(this.uid,this.type);
        }
      }
      //去绑定
      window["bindAccountFun"] = ()=>{
        if(this.platform == 'ios'){
            bindThirdAccount(this.uid,this.type);
        }else{
            window.user.bindThirdAccount(this.uid,this.type);
        }
      }
      //关闭解除绑定的框重新查询绑定状态 //客户端解除绑定成功后使用
      window["getThirdBind"] = ()=>{
        this.closelBox();
        this.getUserBind();
      }
  },
  //相关操作事件
  methods: {
      operaBox(type,typeText){
        this.type = typeText;
        let typeVal = '';
        type == 1?this.typeVal='微信':this.typeVal='QQ';
        if(type == 1){
            if(this.bindObj.weixin ==0){
                window.bindAccountFun();
            }else{
                this.isShow = true;
            }
        }else{
            if(this.bindObj.qq ==0){
                window.bindAccountFun();
            }else{
                this.isShow = true;
            }
        }
      },
      closelBox(){
          this.isShow = false;
      },
      sureOperaFun(){
          $(document).find(".btn_sure").on('click',function(){
             window.unbindAccountFun();
          })
      },
      //获取当前钻石和是否设置支付密码
      getUserInfo:function(){
          common.ajax({
              type:'get',
              url:'api/user/getuserinfo'
          }).then(res=>{
              let mobile = res.data.mobile;
              this.mobile = mobile.substr(0,3)+"****"+mobile.substr(7);
              this.uid = res.data.uid;
          }).then(()=>{
              this.getUserBind();
          })
      },
      //获取用户当前第三方绑定情况
      getUserBind:function(){
          common.ajax({
              type:'get',
              url:'api/user/associatelist'
          }).then(res=>{
              this.bindObj = res.data;
          })
      }
  }
}
</script>

<style>

</style>
